<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <h3>这是商品详情页</h3>
    <a href="./3商品列表页面.html">回到商品列表</a>
    <div class="cont">
        <img class="img" src="" alt="">
        <p class="goodsName">名称：<span></span></p>
        <p class="shop">店铺：<span></span></p>
        <p class="price">价格：<span></span></p>
        <p class="sales">销量：<span></span></p>
    </div>
</body>
<script>

    // 名字=值&名字=值&名字=值
    // 名字=值
    // 名字=值
    // 名字=值

    // 从地址对象中获取到商品数据
    var goodsMsg = location.search;

    // 根据商品数据的格式，处理成日常方便使用的格式
    var arr = goodsMsg.slice(1).split("&");
    
    var obj = {};
    arr.forEach(function(val){
        // console.log(val.split("="))
        obj[val.split("=")[0]] = val.split("=")[1];
    })

    // 选择到需要使用数据的元素
    var img = document.querySelector(".img");
    var goodsName = document.querySelector(".goodsName span");
    var shop = document.querySelector(".shop span");
    var price = document.querySelector(".price span");
    var sales = document.querySelector(".sales span");
    
    // console.log(obj)
    // 将处理之后的数据，插入到对应元素的内容中
    goodsName.innerHTML = obj.intro;
    shop.innerHTML = obj.shop;
    price.innerHTML = obj.price;
    sales.innerHTML = obj.appraise;
    img.src = obj.src;


</script>
</html>